<template>
    <div class="app-container">
      <h1>拍摄订单提交</h1>
  
      <div class="form-container">
        <!-- 订单名称 -->
        <div class="form-group">
          <label>订单名称：</label>
          <input v-model="form.name" placeholder="如：BW场照" />
        </div>
  
        <!-- 拍摄地点 -->
        <div class="form-group">
          <label>拍摄地点：</label>
          <input v-model="form.place" placeholder="如：上海世博展览馆" />
        </div>
  
        <!-- 拍摄日期 -->
        <div class="form-group">
          <label>拍摄日期：</label>
          <input v-model="form.time" type="date" />
        </div>
  
        <!-- 拍摄时间段 -->
        <div class="form-group">
          <label>开始时间：</label>
          <input v-model="form.startTime" type="time" placeholder="09:00" />
        </div>
        <div class="form-group">
          <label>结束时间：</label>
          <input v-model="form.endTime" type="time" placeholder="12:00" />
        </div>
  
        <!-- 客户信息 -->
        <div class="form-group">
          <label>客户姓名：</label>
          <input v-model="form.customerName" />
        </div>
        <div class="form-group">
          <label>联系方式：</label>
          <input v-model="form.customerRemark" placeholder="微信/QQ" />
        </div>
  
        <!-- 拍摄类型 -->
        <div class="form-group">
          <label>拍摄类型：</label>
          <select v-model="form.type">
            <option value="">请选择</option>
            <option value="场照">场照</option>
            <option value="外景">外景</option>
            <option value="棚拍">棚拍</option>
            <option value="其他">其他</option>
          </select>
        </div>
  
        <!-- 服装类型 -->
        <div class="form-group">
          <label>服装类型：</label>
          <input type="checkbox" value="cos" v-model="form.clothTypeArray" /> COS
          <input type="checkbox" value="汉服" v-model="form.clothTypeArray" /> 汉服
          <input type="checkbox" value="lo" v-model="form.clothTypeArray" /> Lo
          <input type="checkbox" value="jk" v-model="form.clothTypeArray" /> JK
          <input type="checkbox" value="日常" v-model="form.clothTypeArray" /> 日常
        </div>
  
        <!-- Cos 角色信息 -->
        <div v-if="form.clothTypeArray.includes('cos')" class="form-group">
          <label>扮演角色：</label>
          <input v-model="form.cosName" placeholder="如：雷电将军" />
        </div>
        <div v-if="form.clothTypeArray.includes('cos')" class="form-group">
          <label>角色IP：</label>
          <input v-model="form.cosIp" placeholder="如：原神" />
        </div>
  
        <!-- 数量 & 金额 -->
        <div class="form-group">
          <label>数量：</label>
          <input v-model.number="form.num" type="number" min="1" />
        </div>
        <div class="form-group">
          <label>应付金额：</label>
          <input v-model.number="form.allPrice" type="number" step="0.01" />
        </div>
        <div class="form-group">
          <label>实收金额：</label>
          <input v-model.number="form.realPrice" type="number" step="0.01" />
        </div>
  
        <div class="form-group">
          <label>金额备注：</label>
          <select v-model="form.remark">
            <option value="付费单">付费单</option>
            <option value="互勉单">互勉单</option>
            <option value="预约定金">预约定金</option>
            <option value="预约全款">预约全款</option>
          </select>
        </div>
  
        <div class="form-group">
          <label>允许展示：</label>
          <input v-model="form.isShow" type="checkbox" /> 是
        </div>
  
        <div class="form-group">
          <label>订单状态：</label>
          <select v-model="form.status">
            <!-- <option value="已预约 待付定金">已预约 待付定金</option> -->
            <option value="已付定金 待拍摄">已付定金 待拍摄</option>
            <option value="已拍摄 待结尾款">已拍摄 待结尾款</option>
            <option value="互勉/共创，无金额">互勉/共创，无金额</option>
            <option value="已返图">已返图</option>
          </select>
        </div>
  
        <!-- <div class="form-group">
          <label>返图链接：</label>
          <input v-model="form.linkPic" placeholder="可选" />
        </div>
  
        <div class="form-group">
          <label>关联日程ID：</label>
          <input v-model.number="form.linkSchedule" type="number" placeholder="如：2005" />
        </div> -->
  
        <!-- 提交与重置 -->
        <div class="form-group actions">
          <button @click="submit" :disabled="loading">
            {{ loading ? '提交中...' : '提交订单' }}
          </button>
          <button @click="reset">重置</button>
        </div>
  
        <!-- 创建时间 -->
        <p class="create-time"><strong>创建时间（UTC）：</strong>{{ form.createTime }}</p>
      </div>
    </div>
  </template>
  
  <script>
  import { addOrder } from "@/api/cd/order";
  
  export default {
    name: 'CameraOrderForm',
  
    data() {
      return {
        loading: false,
        form: {
          name: 'cpsp',
          place: '上海国家会展中心',
          time: '', // 拍摄日期
          startTime: '09:00', // 新增：开始时间
          endTime: '12:00',   // 新增：结束时间
          createTime: '',
          customerName: '',
          customerRemark: 'v',
          type: '场照',
          clothTypeArray: ['cos'],
          clothType: '',
          cosName: '',
          cosIp: '',
          num: null,
          allPrice: 0,
          realPrice: 0,
          remark: '付费单',
          isShow: false,
          status: '已付定金 待拍摄',
          linkPic: '',
          linkSchedule: null
        }
      };
    },
  
    created() {
      this.form.createTime = new Date().toISOString();
    },
  
    methods: {
      async submit() {
        // 校验必填
        if (!this.form.name || !this.form.time || !this.form.customerName || !this.form.startTime || !this.form.endTime) {
          this.$message?.warning?.('请填写完整信息，包括拍摄时间段');
          return;
        }
  
        // 合并服装类型
        this.form.clothType = this.form.clothTypeArray.join(',');
  
        // 构造最终提交数据
        const payload = {
          name: this.form.name,
          place: this.form.place,
          time: this.form.time,
          customerName: this.form.customerName,
          customerRemark: this.form.customerRemark,
          type: this.form.type,
          clothType: this.form.clothType,
          cosName: this.form.cosName,
          cosIp: this.form.cosIp,
          num: this.form.num,
          allPrice: this.form.allPrice,
          realPrice: this.form.realPrice,
          remark: this.form.remark,
          isShow: this.form.isShow,
          status: this.form.status,
          linkPic: this.form.linkPic,
          linkSchedule: this.form.linkSchedule,
          // 新增：schedule 对象（根据需求可传）
          schedule: {
            id: Date.now(),
            date: this.form.time,
            startHour: this.form.startTime,
            endHour: this.form.endTime,
            title: `${this.form.customerName} - ${this.form.name}`,
            userId: 1 // 可从登录用户获取
          }
        };
  
        this.loading = true;
        try {
          const res = await addOrder(payload);
          this.$message?.success?.('订单提交成功！');
          console.log('提交成功:', res.data);
        } catch (error) {
          this.$message?.error?.(error.response?.data?.message || '提交失败');
          console.error('提交失败:', error);
        } finally {
          this.loading = false;
        }
      },
  
      reset() {
        this.form = {
          name: '',
          place: '',
          time: '',
          startTime: '09:00',
          endTime: '12:00',
          createTime: new Date().toISOString(),
          customerName: '',
          customerRemark: '',
          type: '',
          clothTypeArray: [],
          clothType: '',
          cosName: '',
          cosIp: '',
          num: 1,
          allPrice: 0,
          realPrice: 0,
          remark: '付费单',
          isShow: false,
          status: '已预约 待付定金',
          linkPic: '',
          linkSchedule: null
        };
      }
    }
  };
  </script>
  
  <style scoped>
  .app-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
  }
  
  h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 28px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
  }
  
  .form-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 30px;
  }
  
  .form-group {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }
  
  .form-group label {
    width: 120px;
    font-weight: 500;
    color: #555;
    flex-shrink: 0;
  }
  
  .form-group input[type="text"],
  .form-group input[type="number"],
  .form-group input[type="date"],
  .form-group input[type="time"],
  .form-group select {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    color: #606266;
    transition: border-color 0.2s;
  }
  
  .form-group input[type="text"]:focus,
  .form-group input[type="number"]:focus,
  .form-group input[type="date"]:focus,
  .form-group input[type="time"]:focus,
  .form-group select:focus {
    outline: none;
    border-color: #409eff;
  }
  
  /* 复选框样式 */
  .form-group input[type="checkbox"] {
    margin-right: 5px;
    width: auto;
    margin-left: 15px;
  }
  
  .form-group input[type="checkbox"]:first-of-type {
    margin-left: 0;
  }
  
  /* 按钮样式 */
  .actions {
    margin-top: 30px;
    justify-content: center;
  }
  
  .actions button {
    padding: 10px 25px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    margin: 0 10px;
  }
  
  .actions button:first-child {
    background-color: #409eff;
    color: white;
  }
  
  .actions button:first-child:hover {
    background-color: #66b1ff;
  }
  
  .actions button:first-child:disabled {
    background-color: #a0cfff;
    cursor: not-allowed;
  }
  
  .actions button:last-child {
    background-color: #f4f4f5;
    color: #909399;
  }
  
  .actions button:last-child:hover {
    background-color: #e9e9eb;
  }
  
  /* 创建时间样式 */
  .create-time {
    text-align: center;
    margin-top: 30px;
    color: #909399;
    font-size: 13px;
  }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .form-group {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .form-group label {
      margin-bottom: 8px;
      width: 100%;
    }
  
    .form-group input,
    .form-group select {
      width: 100%;
    }
  
    .actions {
      flex-direction: row;
    }
  }
  
  /* 特殊元素样式 */
  select {
    appearance: none;
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") 
      no-repeat right 10px center;
    background-size: 12px;
    padding-right: 30px;
  }
  
  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
  }
  
  /* 服装类型组样式 */
  .form-group > label + input[type="checkbox"] {
    margin-left: 0;
  }
  </style>